<template>
  <van-nav-bar
    :title="title"
    :right-text="rightText"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />
</template>

<script lang="ts" setup>
// import { ref } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
const router = useRouter()
// 在子组件里面定义props
defineProps<{
  title?: string
  rightText?: string
}>()
const emits = defineEmits<{ (e: 'click-right'): void }>()
//下面是默认写法,上面是结合ts写法
const onClickLeft = () => {
  // userRouter 里面包含的是当前路由信息，通过它可以获取到传参信息等。
  // history中包含当前页面路由信息
  console.log(history)
  // ?可选链操作符

  if (history.state?.back) {
    showToast('返回上一页')
    router.go(-1)
  } else {
    showToast('返回登录页')
    router.push('/')
  }
}
const onClickRight = () => {
  showToast('点击注册')
  emits('click-right')
}
</script>
<style lang="scss" scoped>
// scoped作用：只对当前的组件有用（样式）
// 我们现在想要修改vant组件自带的样式,但当前组件加了scoped其样式只会对当前组件生效,因此要改变其他组件内样式,需要用到深度选择器来实现样式穿透
/* 
  样式穿透:
  原生CSS：  >>>
  less：    /deep/
  scss：    ::v-deep
  */
// :deep(){} 大括号内的样式觉具有样式穿透
:deep() {
  .van-nav-bar {
    &__arrow {
      font-size: 18px;
      color: var(--cp-primary);
    }
    &__text {
      font-size: 15px;
      color: var(--cp-primary);
    }
    &__title {
      color: var(--cp-primary);
    }
  }
}
</style>
